<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市二级联动</title>
    <script src="../../js/jquery-1.4.2.js"></script>
</head>
<body>

<div id="selectDiv">
    <select name="province" id="pro">
        <option value="0">--选择省份--</option>
        <option value="北京">北京</option>
        <option value="河北">河北</option>
        <option value="河南">河南</option>
        <option value="山西">山西</option>
    </select>

    <select name="city" id="city">
        <option value="0">--请选择城市--</option>
    </select>
</div>
</body>
<script>

    $(function () {
        //1.给省份准备城市数据
        var data = {
            "北京": ["海淀区", "西城区", "东城区", "延庆区", "门头沟区", "石景山区", "朝阳区", "通州区"],
            "河北": ["石家庄", "张家口", "邯郸", "保定", "唐山", "邢台"],
            "河南": ["郑州", "洛阳", "开封", "安阳", "鹤壁", "濮阳", "新乡", "焦作"],
            "山西": ["太原", "大同", "朔州", "忻州", "阳泉", "吕梁", "晋中"]
        }

        //给pro绑定事件
        $("#pro").change(function () {
            //获取省份对应的省份
            var prov = $("#pro").val()
            //获取城市列表
            var citys = data[prov]
            //清空之前的数据
            $("#city").html("")

            if (citys != null) {
                for (var i = 0; i < citys.length; i++) {
                    $("#city").append("<option>" + citys[i] + "</option>")
                }
            }
        })
    })


</script>
</html>